import React from "react";
import {connect} from "dva";
import _ from "lodash";
import s from "./MultiTask.less";
import moment from "moment";
import queryString from "query-string";
import * as taskService from "../services/taskService";
import * as routerRedux from "react-router-redux";


class MultiTask extends React.Component {

  state = {
    items: [],
  };

  componentDidMount() {
    // const search = queryString.parse(this.props.location.search);
    this.props.dispatch({type: 'task/stv', payload: false});
    const {cardNo} = this.props.location.query;
    const {currentUser} = this.props;
    taskService.myVisitTasks(currentUser.shopId, currentUser.branchNo, cardNo, 1).then(res => {
      if (_.isArray(res.data.waitList)) {
        this.setState({
          items: res.data.waitList,
        });
      }
    });
  }

  render() {
    return (
      <div>
        <div className={s["header"]}>
          <img src={require("../assets/v3.0/list.png")} alt="list"/>
          <h3>该会员有多个任务可回访</h3>
        </div>
        <div className={s["line"]}/>
        <div className={s["mbody"]}>
          <h3>请选择任务：</h3>

          <div className={s["items"]}>
            {_.map(this.state.items, (item, i) => (
              <div className={s["item"]} key={"xsdfsdf" + i}>
                <h3>{this.getTaskType(item.type)}</h3>
                <p>推送时间：{this.getTime(item.createAt)}</p>

                <div className={s["btn"]}
                     onClick={() => {
                       const query = queryString.parse(this.props.location.search);
                       const taskType = item.type;
                       const subType = item.subType;

                       if (_.isFinite(taskType)) {
                         query.taskType = taskType + "";
                       }

                       if (_.isFinite(subType)) {
                         query.subType = subType + "";
                       }

                       query.nocheck = "1";

                       this.props.dispatch(routerRedux.replace({
                         pathname: `/p1_info`,
                         query: query,
                       }))
                     }}
                >回访
                </div>
              </div>
            ))}
          </div>

          <p className={s["help-text"]}>
            导购可从多个回访任务中选择一个进行回访，剩余任务将变成无效任务，不会影响回访率完成率
          </p>
        </div>
      </div>
    );
  }

  getTime = n => {
    return moment(n).format("YYYY-MM-DD");
  };

  getTaskType = type => {
    switch (type) {
      case 0:
        return "新客转化";
      case 3:
        return "沉睡唤醒";
      case 4:
        return "流失挽回";
      case 8:
        return "新客回头";
      case 9:
        return "新客转惯";
      case 15:
        return "老客关怀";
      case 16:
        return "入会关怀";
      case 5:
        return "成长关怀";
      case 6:
        return "升阶升码";
      case 7:
        return "纸尿裤升码";
      case 101:
        return "自定义回访";
      case 12:
        return "疫苗提醒";
      case 13:
        return "奶粉提醒";
      case 14:
        return "纸尿裤提醒";
      case 11:
        return "积分提醒";
      case 10:
        return "老客复购";
    }

    console.log("未匹配的：", type);
    return "";
  };
}

const mapStateToProps = state => ({
  currentUser: state.auth.currentUser,
});

export default connect(mapStateToProps)(MultiTask);
